<template>
  <div class="story-detail-container">
    <div class="story-detail-content" v-if="story">
      <div class="story-header">
        <h1 class="story-title">{{ story.title }}</h1>
        <div class="story-meta">
          <span>{{ story.subtitle }}</span>
        </div>
      </div>

      <div class="story-image">
        <img :src="story.detailImage" :alt="story.title" />
      </div>

      <div class="story-content">
        <!-- 段落内容展示 -->
        <div v-if="paragraphs.length > 0" class="story-paragraphs">
          <div
            v-for="paragraph in sortedParagraphs"
            :key="paragraph.id"
            class="paragraph-item"
          >
            <h3 class="paragraph-title">{{ paragraph.title }}</h3>
            <p class="paragraph-content">{{ paragraph.content }}</p>
          </div>
        </div>
        <div v-else class="no-content">
          <p>暂无更多内容...</p>
        </div>
      </div>
    </div>

    <div v-else-if="loading" class="loading-container">
      <a-spin size="large" />
    </div>

    <div v-else class="error-container">
      <p>故事加载失败，请稍后再试</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import {
  getStoryByIdUsingGet,
  getStoryParagraphsUsingGet,
} from "@/api/cultureStoryController";

const route = useRoute();
const loading = ref(true);
const story = ref<any>(null);
const paragraphs = ref<any[]>([]);

// 按sort从小到大排序的段落
const sortedParagraphs = computed(() => {
  return [...paragraphs.value].sort((a, b) => a.sort - b.sort);
});

// 获取故事详情
const fetchStory = async () => {
  try {
    const res = await getStoryByIdUsingGet({
      id: Number(route.params.id),
    });

    if (res.data.code === 0 && res.data.data) {
      story.value = res.data.data;
      // 获取故事详情成功后，加载段落内容
      await fetchStoryParagraphs();
    } else {
      message.error(res.data.message || "获取故事详情失败");
    }
  } catch (error) {
    console.error("获取故事详情失败:", error);
    message.error("获取故事详情失败");
  } finally {
    loading.value = false;
  }
};

// 获取故事段落
const fetchStoryParagraphs = async () => {
  try {
    const res = await getStoryParagraphsUsingGet({
      storyId: Number(route.params.id),
    });

    if (res.data.code === 0 && res.data.data) {
      paragraphs.value = res.data.data || [];
    } else {
      message.error(res.data.message || "获取故事段落失败");
    }
  } catch (error) {
    console.error("获取故事段落失败:", error);
    message.error("获取故事段落失败");
  }
};

onMounted(() => {
  fetchStory();
});
</script>

<style scoped>
.story-detail-container {
  width: 100%;
  min-height: 100vh;
  padding: 8vh 0;
  background-color: #f9f5f0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-detail-content {
  max-width: 800px;
  width: 95%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.story-header {
  margin-bottom: 2rem;
}

.story-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.story-meta {
  color: #666;
  font-size: 1rem;
}

.story-image {
  width: 100%;
  height: 400px;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 8px;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.story-paragraphs {
  margin-top: 2rem;
}

.paragraph-item {
  margin-bottom: 2rem;
}

.paragraph-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 1rem;
}

.paragraph-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  text-indent: 2em; /* 段落首行缩进两格 */
}

.no-content {
  text-align: center;
  color: #999;
  padding: 2rem 0;
}

.loading-container,
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}
</style>
